<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="./css/mui.min.css">
		<link rel="stylesheet" href="./css/mui_new.css">
		<style>
			.mui-control-content {height: 150px;}
			.mui-parent-content{ padding: 20px 0 0;}
			.chart{height: 200px;margin: 0px;padding: 0px;}
			.mui-pages{top:66px;height: auto;position: absolute; left: 0; right: 0; bottom: 0; width: 100%; box-sizing: border-box;}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{border-bottom:none;border-top: 1px solid rgba(101,125,163,0.35);}
		</style>
	</head>

	<body class="body_c">
		<div class="mui-navbar-inner mui-bar">
			<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-left-nav"></span>
			</button>
			<h1 class="mui-center mui-title">统计</h1>
		</div>
		<div id="slider" class="mui-slider mui-pages">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#item1mobile">快速稽查</a>
					<a class="mui-control-item" href="#item2mobile">假套稽查</a>
					<a class="mui-control-item" href="#item3mobile">综合稽查</a>
					<a class="mui-control-item" href="#item4mobile">信息采集</a>
				</div>
				<div class="mui-slider-progress-bar mui-col-xs-3"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div class="chart" id="lineChart1"></div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="chart" id="lineChart2"></div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content">
					</div>					
				</div>
			</div>

		<script src="./js/mui.min.js"></script>
		<script src="./libs/echarts.min.js"></script>
		<script>
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			
			var getOption = function(arrdata,arrtime) {
				var chartOption = {
					grid: {
						x: 35,
						x2: 10,
						y: 30,
						y2: 25
					},
					calculable: false,
					xAxis: [{
						axisLine: {
							lineStyle: {
								color: '#5e79a3',
								width: 2,
								type: 'solid'
							}
						},
						axisLabel: {
							textStyle: {
								color: '#627ba1'
							}
						},
						data: arrtime
					}],
					yAxis: [{
						type: 'value',
						axisLine: {
							lineStyle: {
								color: '#5e79a3',
								width: 2,
								type: 'solid'
							}
						},
						axisLabel: {
							textStyle: {
								color: '#627ba1'
							}
						},
						splitArea: {
							show: true,
							areaStyle: {
								color: ['rgba(250,250,250,0.08)', 'rgba(255,255,255,0.15)']
							}
						},
						splitLine: {
							show: false
						}
					}],
					series: [{
						type: 'line',
						
						lineStyle:{
							color: '#ff7300'
						},
						data: arrdata
					}]
				};
				return chartOption;
			};
			
			var byId = function(id) {
				return document.getElementById(id);
			};
			var linetime=['18', '19', '20', '21', '22', '23', '24'];

			var lineChart = echarts.init(byId('lineChart1'));
			var linedata=[7.0, 23.2, 25.6, 76.7, 135.6, 20.0, 6.4];
			lineChart.setOption(getOption(linedata,linetime));

			document.getElementById('slider').addEventListener('slide', function(e) {
			
				if (e.detail.slideNumber === 1) {
					var lineChart2 = echarts.init(byId('lineChart2'));
					var linedata2=[20.0,135.2,25.6,8.7,35.6,80.0,70.4];
					lineChart2.setOption(getOption(linedata2,linetime));
				} else if (e.detail.slideNumber === 2) {
					alert("第三个选项卡");
				}
			});


		</script>
	</body>
</html>